<template>
    <div class="container oimage">
      <div class="tips-title">1.基础用法</div>
      <el-row :gutter="20">
        <el-col :span="2">&nbsp;</el-col>
        <el-col :span="4" v-for="fit in fits" :key="fit">
          <div class="tips-title-sub">{{ fit }}</div>
          <el-image style="width: 120px; height: 120px" :src="url1" :fit="fit"></el-image>
        </el-col>
      </el-row>
      <div class="tips-title">2.加载失败</div>
      <el-row>
        <el-col :span="8">
          <div class="tips-title-sub">默认</div>
          <el-image style="width: 300px; height: 180px"></el-image>
        </el-col>
        <el-col :span="8">
          <div class="tips-title-sub">自定义</div>
          <el-image style="width: 300px; height: 180px">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </el-col>
      </el-row>
      <div class="tips-title">3.大图预览</div>
      <div class="demo-image__preview">
        <el-image style="width: 200px; height: 120px" :src="url2" :preview-src-list="srcList"></el-image>
      </div>
      <div class="tips-title">4.图片懒加载</div>
      <el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>
    </div>
</template>
<script>
  export default {
    name: 'o-image',
    data() {
      return {
        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
        url1: '../../../../static/images/avatar-test-pic.jpeg',
        url2: '../../../../static/images/image2-test-pic.jpg',
        srcList: [
          '../../../../static/images/image2-test-pic.jpg',
          '../../../../static/images/image1-test-pic.jpg'
        ],
        urls: [
          '../../../../static/images/lazyimg1-test-pic.jpeg',
          '../../../../static/images/lazyimg2-test-pic.jpeg',
          '../../../../static/images/lazyimg3-test-pic.jpeg',
          '../../../../static/images/lazyimg4-test-pic.jpeg',
          '../../../../static/images/lazyimg5-test-pic.jpeg',
          '../../../../static/images/lazyimg6-test-pic.jpeg'
        ]

      }
    }
  }
</script>
<style>
  .oimage .image-slot{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
  }
</style>
